<template>
  <div>
    <el-card shadow="naver" v-for="(item, index) in conditions" :key="index">
      <el-button
        @click="delcondition(conditions, index)"
        type="text"
        size="small"
        icon="el-icon-remove"
        >移除</el-button
      >
      <br />
      <el-select
        size="mini"
        style="width: 100%"
        v-model="item.conditionId"
        placeholder="选择条件类型"
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in conditionSelectors"
          :key="item.id"
          :disabled="item.disabled || !item.enabled"
        >
        </el-option>
      </el-select>
      <p class="text-description">
        {{ getConditionDescription(item.conditionId) }}
      </p>

      <el-input
        size="mini"
        v-model="item.parameter"
        placeholder="参数"
      ></el-input>
      <el-input
        size="mini"
        v-model="item.description"
        placeholder="描述"
      ></el-input>
    </el-card>
  </div>
</template>

<script>
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
export default {
  props: {
    conditions: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      conditionSelectors: [],
    };
  },
  watch: {
    conditions: {
      deep: true,
      handler() {
        this.compatibleOldName();
      },
    },
  },
  mounted() {
    this.loadConditionSelectors();
  },
  methods: {
    loadConditionSelectors() {
      useWorkflowDesignStore()
        .getAllconditions()
        .then((res) => {
          // console.log(res);
          this.conditionSelectors = res;
          this.compatibleOldName();
        });
    },
    delcondition(conditions, index) {
      conditions.splice(index, 1);
    },
    getConditionDescription(id) {
      var conditions = this.conditionSelectors.filter((c) => c.id == id);
      return conditions.length == 0 ? "" : conditions[0].description;
    },
    compatibleOldName() {
      //为了兼容回显旧的插件名称，只能回显，不能选择，需要编辑选择新的
      var inputConditionIds = this.conditions
        .map((c) => c.conditionId)
        .filter((id) => id.length > 0 && id.split(":").length == 1);

      this.conditionSelectors
        .filter(
          (r) =>
            inputConditionIds.filter((id) => r.id.indexOf(id + ":") >= 0)
              .length > 0
        )
        .forEach((r) => {
          var oldSelector = JSON.parse(JSON.stringify(r));
          oldSelector.id = oldSelector.id.split(":")[0];
          if (
            this.conditionSelectors.filter((s) => s.id == oldSelector.id)
              .length == 0
          ) {
            oldSelector.name += "[回显兼容]";
            oldSelector.disabled = true;
            this.conditionSelectors.push(oldSelector);
          }
        });
    },
  },
};
</script>

<style></style>
